<template>
  <div class="tabs-charts-root">
    <el-tabs class="custom-tabs" tab-position="left" v-model="activeTab" @tab-change="tabClick">
      <!-- 集群树图 -->
      <el-tab-pane name="monitorTree">
        <template #label>
          <el-icon class="icongc gc-node-tree"></el-icon>
          <span>集群树图</span>
        </template>
        <monitorTree ref="MonitorTreeRef" :show-setting="false" :show-tooltip="false"></monitorTree>
      </el-tab-pane>

      <!-- 集群指标 -->
      <el-tab-pane name="monitorMetric" :lazy="true">
        <template #label>
          <el-icon class="icongc gc-liuliangtongji"></el-icon>
          <span>集群指标</span>
        </template>
        <div class="chart-sentinel">
          <chartLineSentinel ref="ChartLineSentinelRef" :show-s="true"></chartLineSentinel>
        </div>
        <el-divider class="custom-divider" />
        <div class="chart-log">
          <chartLineLog ref="ChartLineLogRef"></chartLineLog>
        </div>
      </el-tab-pane>

      <!-- 警告 -->
      <el-tab-pane name="alertList" :lazy="true">
        <template #label>
          <el-icon class="icongc gc-jinggao"></el-icon>
          <span>警告列表</span>
        </template>
        <div class="chart-alert">
          <chartLineAlert ref="ChartLineAlertRef"></chartLineAlert>
        </div>
        <el-divider class="custom-divider" />
        <div class="table-alert" style="">
          <tableAlert :page-size="10" ref="TableAlertRef"></tableAlert>
        </div>
      </el-tab-pane>

      <!--  -->
      <el-tab-pane name="errResponses">
        <template #label>
          <el-icon class="icongc gc-ceshi"></el-icon>
          <span>错误响应</span>
        </template>
        <div style="height: 100%;width: 100%;overflow: scroll;">

          <errorReq></errorReq>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount, nextTick, provide } from "vue";
import monitorTree from '@/views/guardcat/machine/IndexMonitorTree.vue';
import chartLineSentinel from "../sentinel/ChartLineMetric.vue";
import chartLineLog from "../log/ChartLineLog.vue";
import tableAlert from "../machine/alert/TableAlert.vue";
import chartLineAlert from "../machine/alert/ChartLineAlert.vue";
import errorReq from "@/components/ErrorReq.vue";

// -------------------- date
const activeTab = ref('monitorTree')

const MonitorTreeRef = ref();
const ChartLineSentinelRef = ref();
const ChartLineLogRef = ref();
const TableAlertRef = ref();
const ChartLineAlertRef = ref();

// -------------------- methods
const tabClick = () => {
  if (activeTab.value === 'monitorTree') {
    nextTick(() => {
      MonitorTreeRef.value.getMonitorAppsTree();
      MonitorTreeRef.value.windowResize();
    })
  }
  if (activeTab.value === 'monitorMetric') {
    nextTick(() => {
      ChartLineSentinelRef.value.reload();
      ChartLineSentinelRef.value.windowResize();
      ChartLineLogRef.value.reload();
      ChartLineLogRef.value.windowResize();
    })
  }
  if (activeTab.value === 'alertList') {
    nextTick(() => {
      ChartLineAlertRef.value.reload();
      ChartLineAlertRef.value.windowResize();
    })
  }
}

onBeforeMount(() => {
  provide('currentMachine', { value: { appName: 'backend-bsms' } })
  provide('monitorTreeFixedBox', { height: '100%', width: '100%' })
  provide('chartLineResourceFixedBox', { height: '100%', width: '100%' })
})

onMounted(() => {
  tabClick();
})

</script>

<style scoped lang="scss">
.tabs-charts-root {
  @include box(100%, 100%);

  .custom-divider {
    border-bottom: 1px solid var(--el-color-primary-light-7);
    margin: 5px;
  }

  .custom-tabs {
    @include box(100%, 100%);
    border-radius: 10px;

    .chart-sentinel,
    .chart-log {
      height: calc(50% - 11px);
      width: 100%;
      padding: 10px;
    }

    .chart-alert {
      @include box(100%, 180px);
    }

    .table-alert {
      @include box(100%, calc(100% - 200px));
      padding: 10px;
    }

    [class="dark"] & {
      border-color: #292929;
    }

    :deep(.el-tabs__nav-scroll) {
      .is-active {
        font-weight: bold;
      }
    }

    :deep(.el-tabs__item) {
      padding: 0 10px;
    }

    :deep(.el-tabs__content) {
      height: 100%;
    }

    :deep(.el-tab-pane) {
      height: 100%;
      width: 100%;
    }

    :deep(.el-tabs__header.is-left) {
      margin-right: 0;
    }

    .icongc {
      margin-right: 5px
    }

  }
}
</style>